<template>
  <!-- 内容 -->
  <div class="content-wrap">
    <div class="edit-attr-item-wrap">
      <h3 class="mb-[10px]">{{ t('pageContent') }}</h3>
      <el-form label-width="80px" class="px-[10px]">
        <el-form-item :label="t('posterName')">
          <el-input
            v-model.trim="posterStore.name"
            :placeholder="t('posterNamePlaceholder')"
            clearable
            maxlength="12"
            show-word-limit
          />
        </el-form-item>
        <el-form-item :label="t('bgType')">
          <el-radio-group v-model="posterStore.global.bgType">
            <el-radio :label="'url'">{{ t('bgUrl') }}</el-radio>
            <el-radio :label="'color'">{{ t('bgColor') }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="t('bgUrl')" v-show="posterStore.global.bgType == 'url'">
          <upload-image v-model="posterStore.global.bgUrl" :limit="1" />
          <div class="text-sm text-gray-400 mt-[10px]">{{ t('bgUrlTips') }}</div>
        </el-form-item>
        <el-form-item :label="t('bgColor')" v-show="posterStore.global.bgType == 'color'">
          <el-color-picker
            v-model="posterStore.editComponent.bgColor"
            :predefine="posterStore.predefineColors"
          />
        </el-form-item>
        <el-form-item :label="t('statusLabel')" class="display-block">
          <el-switch v-model="posterStore.status" :active-value="1" :inactive-value="0" />
          <div class="text-sm text-gray-400">{{ t('statusTips') }}</div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { t } from '@/lang'
import { watch, ref } from 'vue'
import { img } from '@/utils/common'
import usePosterStore from '@/stores/modules/poster'
import UploadImage from '@/components/UploadFile/src/UploadImg.vue'

const posterStore = usePosterStore()

defineExpose({})
</script>

<style lang="scss" scoped></style>
